<style scoped lang="scss">
.form-login {
  width: 10rem;
  height: 100vh;
  background-color: $white-color;

  .list-top {
    width: 10rem;
    height: 1.0667rem;
    background-color: #FF6040;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }

  .list-top span {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(225deg);
    margin: 0 0.4rem;
    position: absolute;
    left: 0;
    top: 0.4533rem;
  }

  .list-top p {
    font-size: 0.4267rem;
    color: #fff;
    position: absolute;
    left: 1.0667rem;
    top: 0.2267rem;
  }

  .list-top h2 {
    font-size: 0.48rem;
    color: #fff;
    margin: 0 0.4rem;
    font-weight: 400;
  }

  .form-login-img {
    width: 7.0133rem;
    height: 5.3333rem;
    margin: 0 auto;

    img {
      width: 7.0133rem;
      height: 5.3333rem;
    }
  }

  .form-login-form {
    width: 8.9333rem;
    height: 2.1333rem;
    // background-color: orange;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 10.5rem;
    left: 0.53335rem;
  }
}
</style>
<template>
  <div class="form-login">
    <div class="list-top">
      <a href="#">
        <span></span>
        <p>
          返回
        </p>
      </a>
      <h2>
        欢迎登录
      </h2>
    </div>
    <div class="form-login-img">
      <img src="../../assets/imgs/login1.png" alt="">
    </div>
    <div class="form-login-form">
      <form action="">
        <div class="form-login-form-item">
          <input type="text" placeholder="请输入手机号">
        </div>
        <div class="form-login-form-item">
          <input type="password" placeholder="请输入密码">
        </div>
        <div class="form-login-form-item">
          <button>登录</button>
        </div>
      </form>
    </div>

  </div>
</template>